<template>
  <a-space style="width: 100%" direction="vertical">
    <!-- 表单部分 -->
    <a-card>
      <OneFrom @shouji="shouji"></OneFrom>
    </a-card>
    <!-- 按钮组 -->
    <a-card class="radio-card">
      <a-radio-group v-model:value="paidata.status" button-style="solid" size="large">
        <a-radio-button :value="undefined"> 全部 </a-radio-button>
        <a-radio-button :value="1">新任务 </a-radio-button>
        <a-radio-button :value="2">已完成 </a-radio-button>
      </a-radio-group>
    </a-card>
    <a-card>
      <a-button type="primary" style="margin-bottom: 20px"> 人工分配 </a-button>
      <!-- 表格 -->
      <a-table
        :row-selection="rowSelection"
        :columns="columns"
        :data-source="work"
        :scroll="{ x: 1800 }"
        :pagination="{
          size: 'default',
          position: ['bottomCenter'],
          current: paidata.page,
          pageSize: paidata.pageSize,
          showTotal: (counts) => {
            return '共' + counts + '条'
          },
          total: counts,
          showSizeChanger: true,
          showQuickJumper: true,
        }"
        @change="change"
      >
        <template #bodyCell="{ column, text }">
          <template v-if="column.key === 'signStatus'">
            {{ status(text) }}
          </template>
          <template v-if="column.key === 'assignedStatus'">
            <div class="table-column-status" :class="text ? 'can-use' : 'stop-use'">
              {{ status1[text] }}
            </div>
          </template>
          <template v-if="column.key === 'signRecipient'">
            {{ status2[text] }}
          </template>
        </template>
      </a-table>
      <template #name="{ text }">{{ text.first }} {{ text.last }}</template>
    </a-card>
  </a-space>
</template>
<script setup>
import OneFrom from './components/OneFrom.vue'
import { ref, watch, reactive } from 'vue'
import { getdispatchAPI } from '@/services/pickDelivery'


// const value = ref(1)

const shouji = (data) => {
  console.log(data)
  paijian(data)
}

const paidata = reactive({
  page: 1,
  pageSize: 10,
  status: undefined,
})
// 任务状态下拉列表
const status = (data) => {
  const map = {
    0: '未签收',
    1: '已签收',
    2: '拒收',
  }
  return map[data]
}
// const xx = ref([1, 2])
const status1 = {
  2: '已分配',
  3: '待人工分配',
}
const status2 = {
  1: '本人',
  2: '代收',
}
// const props = defineProps({
//   // 表格数据
//   dataSource: {
//     type: Array,
//     default: () => [],
//   },
//   // 分页总数
//   total: {
//     type: Number,
//     default: 0,
//   },
//   // 表格加载状态
//   loading: {
//     type: Boolean,
//     default: false,
//   },
//   page: {
//     type: Number,
//     default: 1,
//   },
//   pageSize: {
//     type: Number,
//     default: 10,
//   },
// })
// 分页

const change = (value) => {
  console.log(value)
  paidata.page = value.current
  paidata.pageSize = value.pageSize
  paijian(paidata)
}

const counts = ref('')
const columns = ref([
  {
    title: '序号',
    align: 'center',
    customRender: ({ index }) => (paidata.page - 1) * paidata.pageSize + index + 1,
    width: 150,
  },
  { title: '派件作业编号', dataIndex: 'id', key: 'id', width: 180 },
  { title: '订单编号', dataIndex: 'orderId', key: 'orderId', width: 180 },
  { title: '所在营业部', dataIndex: 'agencyName', key: 'agencyName', width: 150 },
  { title: '任务分配状态', dataIndex: 'assignedStatus', key: 'assignedStatus' },
  { title: '快递员姓名', dataIndex: 'courierName', key: 'courierName' },
  { title: '签收状态', dataIndex: 'signStatus', key: 'signStatus' },
  { title: '签收人', dataIndex: 'signRecipient', key: 'signRecipient' },
  { title: '预计开始时间', dataIndex: 'estimatedStartTime', key: 'estimatedStartTime', width: 200 },
  { title: '预计完成时间', dataIndex: 'estimatedEndTime', key: 'estimatedEndTime', width: 200 },
  { title: '实际完成时间', dataIndex: 'actualEndTime', key: 'actualEndTime', width: 200 },
])
const work = ref([])

const paijian = async (data) => {
  console.log(data)
  const res = await getdispatchAPI(data)
  console.log(res)
  work.value = res.data.items
  counts.value = Number(res.data.counts)
}
paijian(paidata)
// 监听按钮组状态，切换状态后，重新获取数据
watch(
  () => paidata.status,
  () => {
    // 重置页码
    paidata.page = 1
    // 重置页码后，重新获取数据
    paijian(paidata)
  },
)

// rowSelection
const rowSelection = {
  getCheckboxProps: (record) => ({
    disabled: record.name !== '',
    
  }),
}
</script>
<style scoped lang="scss">
.radio-card {
  // 重置卡片样式
  :deep(.ant-card-body) {
    padding: 0;
    
  }
  // 重置按钮组样式
  :deep(.ant-radio-button-wrapper) {
    width: 120px;
    font-size: 14px;
    text-align: center;
    border-radius: 0;
    border: 0;
    
    // 隐藏中间分割线
    &::before {
      display: none;
    }
  }
}


</style>